import { Button, message } from 'antd';

import { PlusOutlined } from '@ant-design/icons';
import { BetaSchemaForm, ProFormInstance } from '@ant-design/pro-form';
import React, { useRef, useState } from 'react';

import MyTable from '@/components/MyTable';
import MyUpload from '@/components/MyUpload';
import { editNotice, findByNoticePageList } from '@/services/notice';

const columnDialog = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
    initialValues: 0,
    hideInForm: true,
  },
  {
    title: '图标',
    dataIndex: 'url',
    valueType: 'image',
    key: 'image',
    renderFormItem: (item: any, f: any, form: any) => {
      const image = form.getFieldValue('url');
      const id = form.getFieldValue('imageId');
      return (
        <>
          {' '}
          <MyUpload
            type={9}
            url={image}
            id={id}
            onChange={(event) => {
              console.log('MyUpload', event);
              form.setFieldsValue({ imageId: event });
            }}
          ></MyUpload>
        </>
      );
    },
  },
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
    width: 'md',
    required: true,
  },
  {
    title: '图标',
    dataIndex: 'imageId',
    key: 'imageId',
    formItemProps: {
      hideInForm: true,
    },
   // hideInForm: true,
  },

  {
    title: '开始时间',
    dataIndex: 'startDate',
    valueType: 'dateTime',
    width: 'md',
    required: true,
  },
  {
    title: '结束时间',
    dataIndex: 'endDate',
    valueType: 'dateTime',
    width: 'md',
    required: true,
  },

  {
    title: '备注',
    dataIndex: 'remark',
    width: 'md',
    required: true,
  }
];

const cloneTbale = () => {
  const formRef = useRef<ProFormInstance>();
  const column = [
    {
      title: '编号',
      dataIndex: 'index',
      key: 'index',
      valueType: 'indexBorder',
      width: '50px',
    },
    {
      title: '图标',
      dataIndex: 'url',
      valueType: 'image',
      key: 'url',
    },

    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 'md',
    },

    {
      title: '开始时间',
      dataIndex: 'startDate',
      width: 'md',
      valueType: 'dateTime',
    },
    {
      title: '结束时间',
      dataIndex: 'endDate',
      width: 'md',
      valueType: 'dateTime',
    },

    {
      title: '备注',
      dataIndex: 'remark',
      width: 'md',
    },

    {
      title: '操作',
      width: '164px',
      key: 'option',
      valueType: 'option',
      render: (_: any, row: any, index: any, action: any) => [
        <a
          key="link"
          onClick={(a) => {
            console.log(row);
            editDialogInfo(row, index);
          }}
        >
          编辑
        </a>,
      ],
    },
  ];
  const [editDialg, setEditDialg] = React.useState(false);
  const [banks, setBanks] = useState<API.Notice>();

  function editDialogInfo(row, index) {
    setBanks(row);
    formRef?.current?.setFieldsValue(row);
    setEditDialg(true);
  }

  function hideEditDialg() {
    setBanks({ id: 0 });
    formRef.current?.resetFields();
    setEditDialg(false);
  }

  function openEditDialg() {
    setBanks({ id: 0 });
    formRef.current?.resetFields();
    setEditDialg(true);
  }

  // @ts-ignore
  return (
    <div>
      <BetaSchemaForm<API.Notice>
        formRef={formRef}
        initialValues={banks}
        onCancel={() => setEditDialg(false)}
        onVisibleChange={setEditDialg}
        title="字典管理"
        visible={editDialg}
        layoutType="ModalForm"
        columns={columnDialog}
        onFinish={async (values) => {
          values.id = banks.id;
          values.startDate = new Date(values?.startDate).getTime();
          values.endDate = new Date(values?.endDate).getTime();
          console.log(values);
          return new Promise<Boolean>((resolve, reject) => {
            editNotice(values)
              .then(() => {
                message.success('操作成功');
                setEditDialg(false);
                //   refresh ();
                resolve(true);
              })
              .catch(() => {
                message.success('操作失败');
                reject(false);
              });
          });
        }}
      />
      <MyTable
        search={false}
        toolbar={() => [
          <Button
            onClick={() => {
              formRef.current?.resetFields();
              openEditDialg();
            }}
            key="button"
            icon={<PlusOutlined />}
            type="primary"
          >
            新建
          </Button>,
        ]}
        request={findByNoticePageList}
        columns={column}
      ></MyTable>
    </div>
  );
};

export default cloneTbale;
